import React, { Component } from 'react'
import {View, DeviceEventEmitter} from 'react-native'
import ListCom from '../list/list2'
import { Actions } from 'react-native-router-flux'
import commonStyle from '../../../../../libs/commonStyle'
import pxToDp, { deviceHeightDp } from '../../../../../libs/pxToDp'
import { connect } from 'react-redux' // 引入connect函数
import * as articleAction from '../../../../../redux/actions/article'
import TabsCom from '../../../../../components/tabs'

class TabCom extends Component {
	constructor(arg) {
	    super(arg)
		this.state = {
			activeIndex: 0
			// listItem: {}
		}
	}
	async componentDidMount() {
		await this.props.getList()
		await this.props.getCanuseDomain()
		DeviceEventEmitter.emit('change.article.tab', this.props.list[this.state.activeIndex])
	}
	onSearch() {
		Actions.search()
	}
	onTabChange(index) {
		this.props.getCanuseDomain()
		this.setState({
			activeIndex: index
		})
		DeviceEventEmitter.emit('change.article.tab', this.props.list[index])
	}
	render() {
		let { list } = this.props
		let {activeIndex} = this.state
		return (
			<View>
				<TabsCom lists={list} onTabChange={this.onTabChange.bind(this)}  activeIndex={activeIndex} />
				<ListCom />
				
			</View>
		)
	}
}

export default connect(
	state => ({
		list: state.article.typeList
	}),
	dispatch => ({
		getList: () => dispatch(articleAction.articleCategary()),
		getCanuseDomain: () => dispatch(articleAction.getCanuseDomain())
	})
)(TabCom)
